<template>
  <div>
    <searchheader  :searchItem="searchItem" :losesearchfocus="losesearchfocus" @getsearchblur="getsearchblur"></searchheader>

      <div class="loadmore-container" ref="searchWrapper"> 
       <div class="loadmore-ul">
        <div class="search-content" @click="getpagefocus">
          <div class="hot-his" style="font-size:.24rem">热搜</div>
          <div class="hot-search" v-if="hotWords != null && 0 < hotWords.length">
            <div class="hot-search-text" v-for="(item,index) in hotWords" style="float:left;"  v-if="!!item.name" @click="turn2Result(item.name||item.content)">
                <span style="white-space: nowrap;" >{{item.name||item.content}}</span>
            </div>
            <br style="clear:both;">
          </div>
          <div class="hot-his bb1" style="margin-top: 0.6rem;padding-bottom:.28rem;clear:both;font-size:.24rem">历史搜索
            <span @click="deletehistory" class="yl-ashcan" style="float: right;font-size: 0.34rem;color: #333333;"></span>
          </div>
          <div v-if="0 < historys.length" >
            <div class="history bb1" v-for="(item,index) in historys" @click="turn2Result(item)" v-if="!!item">{{item}}</div>
          </div>
        </div>

      </div> 
     </div>  
    <mt-popup v-model="isdelete" style="border-radius: 5px">
      <div style="width: 6.2rem;height: 2.4rem;">
        <div class="delete-his">
          <span>确定删除？</span>
        </div>
        <div class="delete-his-bottom">
          <div class="cancle-history" @click="hiscanale">取消</div>
          <div class="queding-his" @click="hisyes">确定</div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import searchheader from 'src/components/search-header.vue'

import { Header as mtHeader } from 'mint-ui'
import { Button as mtButton, Popup } from 'mint-ui'
import { Indicator } from "mint-ui";
import api from 'src/api/index'
export default {
  name:"search",
  data() {
    return {
      isdelete: false,
      searchItem: '',
      hotWords: [],
      historys: [],
      losesearchfocus:false,
    }
  },
  created() {
    this.initSearch().then(data => {
      Indicator.close();
      return this.initScroll();
    });
  },
  components: {
    searchheader, mtHeader, mtButton, Popup,
  },
  mounted() {
    Indicator.open("加载中...");
  },
  methods: {
    initSearch() {
      let p = new Promise((resolve, reject) => {
        let type = this.$route.query.type;
        if (!type) type = 0;
        api.Querysearch({ type: type }).then(res => {
          if (res.success) {
            this.historys = res.data.histroySearchs.slice(0,10);
            this.hotWords = res.data.hotWords;
            _each(this.hotWords,(v,j)=>{
              if(v!=null&&v!=""){
                this.addItem(res.data.hotWords[j].name);
                // break;
              }
            })
          }
          resolve("获取搜索数据...");
        });
      });
      return p;
    },
    //初始化scroll
    initScroll() {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let searchWrapper = this.$refs.searchWrapper;
          this.setScroll(searchWrapper, this);
        });
        resolve("初始化scroll结束...");
      });
      return p;
    },
    setScroll(searchWrapper, _this) {
      _this.myscroll = new iScroll(searchWrapper, {
        //上拉时触发
        onScrollMove: function() {
          if ((this.y <= (this.wrapperH - this.scroller.clientHeight - 50)) && _this.is_r == false) {
            //加载数据
            _this.is_r = true;
          }
        },
        onScrollEnd: function() {
        }
      });
      Indicator.close();
    },
    addItem(name) {
      this.searchItem = name;
    },
    deletehistory() {
      this.isdelete = true
    },
    hiscanale() {
      this.isdelete = false
    },
    hisyes() {
      api.DeleteHistorySearch({}).then(res => {
        if (res.success) {
          this.historys = [];
          this.isdelete = false;
        }
      })
    },
    turn2Result(name) {
      let type = this.$route.query.type;
      if (!type) type = 0;
      this.$router.push({ path: '/searchResult', query: { params: name, type: type } });
    },
    getsearchblur(){
      this.searchItem=""
    },
    getpagefocus(){
      document.activeElement.blur();
      this.losesearchfocus=true;
    }
  }
}
</script>
<style>
.search-content {
  background-color: white;
  border-top: 1px solid #e3e4e6;
  padding: 0rem 0.3rem;
  height: 12.4rem;
}

.hot-search {
  margin-left: -0.3rem
}

.hot-search-text {
  height: 0.5rem;
  line-height: 0.495rem;
  border: 1px solid #e6e6e6;
  padding-left: 0.22rem;
  padding-right: 0.22rem;
  margin-right: 0.2rem;
  border-radius: 0.05rem;
  font-size: 0.28rem;
  color: #333333;
  font-family: "PingFangSC Regular";
  float: left;
  margin: .3rem 0 0 .2rem;
}

.hot-his {
  font-size: .24rem;
  font-size: 18px;
  color: #666666;
  font-family: 'PingFangSC Regular';
  margin-top: 0.3rem;
}

.history {
  height: 0.8rem;
  font-size: 0.28rem;
  color: #333333;
  font-family: "PingFangSC Regular";
  line-height: 0.8rem;
}

.delete-his {
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  font-size: 0.32rem;
  font-family: "PingFangSC Regular";
  color: #333333;
}

.delete-his-bottom {
  border-top: 1px solid #d1d1d1;
  display: flex;
  color: #fb6856;
  font-size: 0.32rem;
}

.cancle-history {
  flex: 1;
  height: 0.89rem;
  text-align: center;
  line-height: 0.89rem;
  border-right: 1px solid #d1d1d1;
}

.queding-his {
  flex: 1;
  height: 0.89rem;
  text-align: center;
  line-height: 0.89rem;
}

.loadmore-container {
  height: 95vh;
  overflow: hidden;
  margin: 0 auto;
}

.loadmore-ul {
  padding-bottom: .2rem;
  list-style: none;
}
</style>